<template>
  <div class="addPurchaseContent">
    <div class="addPurchase">
      <div class="carefulText rowFlex columnCenter">
        <div class="icon">
          <i class="el-icon-warning"></i>
        </div>
        <span>受微信限制，用户发起一次拼单后有效时间为24小时。</span>
      </div>
      <BiForm>
        <BiFormItem label="用户ID">
          <template slot="content">
            <el-input
              v-model="formData.member_id"
              clearable
              placeholder="请输入用户ID"
            />
          </template>
        </BiFormItem>
        <BiFormItem label="拼团状态">
          <template slot="content">
            <el-select v-model="formData.order_status" placeholder="请选择">
              <el-option
                v-for="item in commonDataList.group_buy"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>

          </template>
        </BiFormItem>
        <div>
          <el-button
            style="margin-left: 10px"
            type="primary"
            :disabled="loading"
            :loading="loading"
            @click="clickSearch('查询')"
          >查询</el-button>
          <el-button @click="reset">重置</el-button>
        </div>
      </BiForm>
      <div class="table-table">
        <BiTable
          :loading="loading"
          :data="tableData"
          size="medium"
          :column="tableColums"
          fixed="sticky"
          fixed-offset="50"
          pagination
          layout="total, prev, pager, next"
          :auto-scroll="false"
          :total="page_info.total"
          :page.sync="page_info.page"
          :limit.sync="page_info.page_size"
          @pagination="handlePageChange"
        >
          <template v-slot:order_status="{row}">
            <p v-if="row.order_status == '拼单中'" class="colorStatus"><span class="dianWait"></span> <span>拼单中</span></p>
            <p v-else-if="row.order_status == '已拼成'" class="colorStatus"><span class="dianSuccess "></span> <span>已拼成</span></p>
            <p v-else-if="row.order_status == '未拼成'" class="colorStatus"><span class="dianFail "></span> <span>未拼成</span></p>
            <p v-else>-</p>
          </template>
        </BiTable>
      </div>
    </div>
  </div></template>
<script>
import { purchaseData } from '@/api/active'
import { mapState, mapActions } from 'vuex'
export default {
  props: {
    row: {
      type: Object,
      default: () => {}
    }
  },
  computed: {
    ...mapState('common', ['commonDataList'])
  },
  data() {
    return {
      formData: {
        member_id: '',
        prop_id: '',
        order_status: ''
      },
      loading: false,
      page_info: {
        page: 1,
        page_size: 20,
        total: 0
      },
      tableData: [],
      tableColums: [
        {
          label: '用户 ID',
          prop: 'member_id'
        },
        {
          label: '拼团 ID',
          prop: 'team_id'
        },
        {
          label: '角色',
          prop: 'order_category'
        },
        {
          label: '订单编号',
          prop: 'order_no',
          width: 200
        },
        {
          label: '拼团状态',
          prop: 'order_status',
          width: 120,
          slotScope: true
        },
        {
          label: '支付完成时间',
          width: '120',
          render: (h, { row }) => {
            if (row.pay_time) {
              return (
                <span>
                  <p>{row.pay_time.split(' ')[0] || ''}</p>
                  <p>{row.pay_time.split(' ')[1] || ''}</p>
                </span>
              )
            }
          }
        },
        {
          label: '充值金额',
          prop: 'amount'
        },
        {
          label: '拼团退款',
          prop: 'refund_amount',
          render: (h, { row }) => {
            if (row.refund_amount) {
              return <span>{row.refund_amount} </span>
            } else {
              return <span>- </span>
            }
          }
        }
      ]
      // statusOptions: [
      //   {
      //     label: '拼单中',
      //     value: 1
      //   },
      //   {
      //     label: '已拼成',
      //     value: 2
      //   },
      //   {
      //     label: '未拼成',
      //     value: 3
      //   }
      // ]
    }
  },
  mounted() {
    this.formData.prop_id = this.row.prop_id
    this.clickSearch()
    this.requestCommonData({ type: 'group_buy' })
  },
  methods: {
    ...mapActions('common', ['requestCommonData']),
    handlePageChange(page) {
      this.page_info.page = page.page
      this.clickSearch()
    },
    reset() {
      this.$set(this, 'formData', {
        member_id: '',
        order_status: '',
        prop_id: this.row.prop_id
      })
      this.$set(this, 'page_info', {
        page: 1,
        page_size: 20,
        total: 0
      })
    },
    close() {
      this.$emit('cancel')
    },
    clickSearch(type) {
      if (type == '查询') {
        this.page_info.page = 1
      }
      const data = {
        member_id: this.formData.member_id,
        prop_id: this.formData.prop_id,
        order_status: this.formData.order_status
      }
      this.loading = true
      purchaseData({ ...data, ...this.page_info }).then((res) => {
        this.loading = false
        if (res.status_code === 1) {
          this.tableData = res.data.data
          this.page_info = res.data.page_info
        }
      })
    }
  }

}
</script>

<style lang="scss" scoped>
.addPurchase {
  width: 100%;
  height: auto;
  padding: 20px;
}
.carefulText{
    margin-bottom: 20px;
}
.addPurchaseContent{
  position: relative;
  .table-table{
    margin-top: 0;
  }
   .dialog-footer{
  }
}
</style>